<template>
  <div id='linechart' :style='size'>
    <chart ref='chart1' :options='options' :style='size' :auto-resize='true'></chart>
  </div>
</template>

<script>
  // import graphic from '../../node_modules/echarts/lib/util/graphic.js'

  export default {
    name: 'pie',
    data () {
      return {
        options: {},
        size: {
          width: '100%',
          height: '100%'
        },
        xData: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        yData1: [1, 2, 3, 2, 5, 6, 7, 6, 5, 4, 7, 2],
        yData2: [2, 3, 4, 1, 6, 7, 6, 5, 4, 3, 2, 1],
        yData3: [3, 4, 5, 6, 7, 1, 5, 4, 6, 6, 1, 7],
        yData4: [4, 5, 2, 7, 2, 5, 4, 3, 2, 1, 6, 3],
        yData5: [5, 1, 7, 3, 1, 4, 3, 7, 1, 2, 3, 4],
        yData6: [6, 7, 6, 5, 4, 3, 2, 1, 7, 5, 4, 5],
        yData7: [7, 6, 1, 4, 3, 2, 1, 2, 3, 7, 5, 6]
      }
    },
    computed: {},
    mounted () {
      this.options = {
        title: {
          top: '0',
          left: 'center',
          text: '20XX年空气质量区域排名',
          textStyle: {
            align: 'center',
            color: '#FFFFFF',
            fontSize: 15
          }
        },
        // backgroundColor: '#043491',
        backgroundColor: 'rgba(255, 255, 255, 0)',
        legend: {
          x: 'center',
          y: '6%',
          textStyle: {
            color: '#f2f2f2',
            fontSize: 12
          },
          icon: 'circle',
          data: ['细河区', '海州区', '新邱区', '太平区', '清河门区', '彰武县', '阜新蒙古族自治县']
        },
        grid: {
          right: '2%',
          bottom: '2%',
          left: '5%',
          top: '30%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: this.xData,
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#FFF',
              fontSize: 12
            }
          }
        }],
        yAxis: [{
          type: 'value',
          name: '排名',
          nameTextStyle: {
            color: '#fff'
          },
          position: 'left',
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: '#0B4CA9'
            }

          },
          axisLabel: {
            show: false,
            color: '#d4ffff',
            fontSize: 12
          }
        }],
        series: [
          {
            name: '细河区',
            stack: 'one',
            type: 'bar',
            label: {
              show: true
            },
            // yAxisIndex: 0,
            // symbolSize: 12,
            itemStyle: {
              normal: {
                color: '#da70d6'
              }
            },
            data: this.yData1
          },
          {
            name: '海州区',
            stack: 'one',
            type: 'bar',
            label: {
              show: true
            },
            // yAxisIndex: 0,
            // symbolSize: 12,
            itemStyle: {
              normal: {
                color: '#0EF100'
              }
            },
            data: this.yData2
          },
          {
            name: '新邱区',
            stack: 'one',
            type: 'bar',
            label: {
              show: true
            },
            // yAxisIndex: 0,
            // symbolSize: 12,
            itemStyle: {
              normal: {
                color: '#00CAE0'
              }
            },
            data: this.yData3
          },
          {
            name: '太平区',
            stack: 'one',
            type: 'bar',
            label: {
              show: true
            },
            // yAxisIndex: 0,
            // symbolSize: 12,
            itemStyle: {
              normal: {
                color: '#E37552'
              }
            },
            data: this.yData4
          },
          {
            name: '清河门区',
            stack: 'one',
            type: 'bar',
            label: {
              show: true
            },
            // yAxisIndex: 0,
            // symbolSize: 12,
            itemStyle: {
              normal: {
                color: '#800080'
              }
            },
            data: this.yData5
          },
          {
            name: '彰武县',
            stack: 'one',
            type: 'bar',
            label: {
              show: true
            },
            // yAxisIndex: 0,
            // symbolSize: 12,
            itemStyle: {
              normal: {
                color: '#1978D9'
              }
            },
            data: this.yData6
          },
          {
            name: '阜新蒙古族自治县',
            stack: 'one',
            type: 'bar',
            label: {
              show: true
            },
            // yAxisIndex: 0,
            // symbolSize: 12,
            itemStyle: {
              normal: {
                color: '#FF8080'
              }
            },
            data: this.yData7
          }

        ]
      }
      window.addEventListener('resize', function () {
        this.$refs.chart1.resize()
      })
    }
  }
</script>
<style>

</style>
